<template>
  <h2>setup-todolist</h2>

  <button @click="decrement">-</button>
  <span>{{ count }}</span>
  <button @click="increment">+</button>

  <hr />

  <input type="text" v-model="value" />
  <button @click="add">添加</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
import { useCounter, useTodolist } from "@/utils/index";
export default {
  setup() {
    const [count, increment, decrement] = useCounter(10);
    const [value, list, add, remove] = useTodolist();

    return { count, increment, decrement, value, list, add, remove };
  },
};
</script>
